
<style>
    *{
        padding: 0;
        margin: 0;
    }
    
    .box{
        width:600px;
        margin:40px auto;
       
    }
    .box1{
        width:100px;
        height:100px;
        border-radius: 5px;
    }
    .box1:nth-of-type(n+1):nth-of-type(-n+5){
        width:100px;
        height:100px;
        border-radius: 5px;
        background: #66cd00;
    }
    .box1:nth-of-type(1){
        position:relative;
        left:110px;
        box-shadow: #c8eb9d 0 -10px 4px ;
    }
    .box1:nth-of-type(2){
        position:relative;
        left:212px;
        bottom:100px;
        box-shadow: #c8eb9d 0 -10px 4px ;
    }
    .box1:nth-of-type(3){
        position:relative;
        left:314px;
        bottom:200px;
        box-shadow: #c8eb9d 0 -10px 4px ;
    }
    .box1:nth-of-type(4){
        position:relative;
        left:210px;
        bottom:198px;
    }
    .box1:nth-of-type(5){
        position:relative;
        left:210px;
        bottom:196px;
    }
    .box1:nth-of-type(6){
        position:relative;
        bottom:298px;
        background: #8168ea;
    }
    .box1:nth-of-type(7){
        position:relative;
        bottom:296px;
        background: #e86a80;
    }
    .box1:nth-of-type(8){
        position:relative;
        bottom:294px;
        background:  #1ec0ff;
        border-radius: 5px 5px 5px 70px; 
    }
    .box1:nth-of-type(9){
        position:relative;
        left:102px;
        bottom:498px;
        background:  #face47;
    }
    .box1:nth-of-type(10){
        position:relative;
        left:102px;
        bottom:496px;
        background:  #86d335;
    }
    .box1:nth-of-type(11){
        position:relative;
        left:420px;
        bottom:798px;
        background:  #face47;
    }
    .box1:nth-of-type(12){
        position:relative;
        left:420px;
        bottom:796px;
        background:  #86d335;
    }
    .box1:nth-of-type(13){
        position:relative;
        left:420px;
        bottom:794px;
        background: #e86a80;
        border-radius: 5px 5px 70px 5px;
    }

    .box1:nth-of-type(14){
        position:relative;
        left:318px;
        bottom:998px;
        background:  #1ec0ff;
    }
    .box1:nth-of-type(15){
        position:relative;
        left:318px;
        bottom:996px;
        background: #8168ea;
    }
    
</style>
<div class="box">
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>

    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>

    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</p>